<html>
    <head>
        <title>访问父组件实例</title>
    </head>
    <body>
        <script>
            // 2、访问父组件实例  "$parent"
                                        /*
                                            和 $root 类似， $parent 属性可以用来从一个子组件访问父组件的实例。
                                            它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入组件的方式。       
                                        */
                                        /*
                                            注意：
                                                在绝大多数情况下，触达父级组件会使得你的应用更加难以调试和理解，尤其是当你变更了腹肌组件的数据的时候。
                                                当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。
                                        */
                                        /*
                                            另外，在一些可能适当的时候，你需要特别地共享一些组件库。
                                            举个例子，在和JavaScript API 进行交互而你不渲染HTML的抽象组件内，诸如这些假设性的Google地图组件一样：

                                                <google-map>
                                                    <google-map-markers v-bind:place="iceCreamShops"></google-map-markers>
                                                </google-map>

                                            这个 <google-map> 组件可以定义一个 map 属性，所有的子组件都需要访问它。
                                            在这种情况下 <google-map-markers> 可能想要通过 this.$parent.map 的方式来访问那个地图，以便围棋添加一组标记。


                                            请留意，尽管如此，通过这种模式构建出来的那个组件的内部仍然是容易出现问题的。
                                            比如，谁想一下我们添加一个新的 <google-map-marker> 组件，当 <google-map-markers>在其内部出现的时候，只会渲染那个区域内的标记：

                                                <google-map>
                                                    <google-map-region v-bind:shape="cityBoundaries">
                                                        <google-map-markers v-bind:place="iceCreamShops"></google-map-markers>
                                                    </google-map-region>
                                                </google-map>
                                        */

                                        /*

                                            那么在<google-map-markers>内部你可能发现自己需要一些类似这样的hack:

                                                var map = this.$parent.map || this.$parent.$parent.map

                                            很快它就会失控。这也是我们针对需要向任意更深层级的组件提供上下文信息时推荐"依赖注入" 的原因
                                        */

        </script>
    </body>
</html>